<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <![endif]-->
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/countUp.js"></script>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
    <script type="text/javascript" src="static/layer/layer.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="static/css/g.css" />
    <link rel="stylesheet" type="text/css" href="static/swiper/css/swiper.css" />
    <script type="text/javascript" src="static/swiper/js/swiper.js"></script>
    <link rel="stylesheet" type="text/css" href="static/layer/layer.css" />
    <link rel="stylesheet" type="text/css" href="static/css/head.css" />
    <link rel="stylesheet" type="text/css" href="static/css/footer.css" />
    <link rel="stylesheet" type="text/css" href="static/css/topnav.css" />
    <link rel="stylesheet" type="text/css" href="static/css/login.css" />
    <link rel="stylesheet" type="text/css" href="static/silder/jquery.slider.css" />
    <script type="text/javascript" src="static/silder/jquery.slider.min.js"></script>
    <link rel="stylesheet" type="text/css" href="static/css/detail/detail.css" />
    <script type="text/javascript" src="static/js/login.js"></script>
    <title>一介书生</title>
</head>
<body>
<div id="page">
    <!-- 头部的登录 -->
    <div class="header" id="header">
    <a href="" target="_blank" class="login_wrapper">
        <img src="static/images/logo.png" class="logo">
    </a>
    <div class="nav" id="header_nav">
        <div class="nav_list">
            <a href="" target="_blank" class="nav_list_i">快速借书</a>
        </div>
        <div class="nav_list">
            <a href="" target="_blank" class="nav_list_i">快速还书</a>
        </div>
        <div class="nav_list">
            <a href="" target="_blank" class="nav_list_i">查找资料</a>
        </div>
        <div class="nav_list">
            <a href="" target="_blank" class="nav_list_i">服务指南</a>
        </div>
        <div class="nav_list">
            <a href="" target="_blank" class="nav_list_i">读者指南</a>
        </div>
        <div class="nav_list">
            <a href="" target="_blank" class="nav_list_i">关于我们</a>
        </div>
    </div>
    <div class="serarch">
        <input type="text" placeholder="搜索图书或关键词" class="search_input" />
        <div class="search_btn"></div>
    </div>

    <!-- 登陆之前的 -->
    <div class="login" id="loginBtn">登陆</div>
    <div class="login_zhu" id="login_zhu">免费注册</div>
    <!-- 登录之后的 -->
    <div class="user-info user-nav-info fr hasLoading hide">
        <div class="user-avatar">
            <a target="_blank" href="">
                <img src="https://thirdqq.qlogo.cn/g?b=oidb&amp;k=V60H6trN553ichTlrpOYEWA&amp;s=100&amp;t=1557523484">
            </a>
        </div>
        <div class="info-m">
            <div class="user-drop">
                <div class="user-i">
                    <a href="" target="_blank">
                        <img src="https://thirdqq.qlogo.cn/g?b=oidb&amp;k=V60H6trN553ichTlrpOYEWA&amp;s=100&amp;t=1557523484">
                    </a>
                    <div class="user-r">
                        <div class="user-t clearfix">
                            <div class="fl user-name">
                                <a href="" target="_blank">沐雪</a></div>
                            <div class="fl user-icon clearfix">
                                <a href="" target="_blank">
                                    <i class="phoned-icon"></i>
                                </a>
                                <a href="" target="_blank">
                                    <i class="p-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="user-id">ID：13842854</div>
                    </div>
                </div>
                <div class="user-bottom">
                    <a href="" class="fr">退出</a>
                    <a href="" target="_blank">账户设置</a>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- 商品展示 -->
    <div class="main">
        <div class="product-intro">
            <div id="banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide_b">
                        <a href=""><img src="https://img13.360buyimg.com/n1/jfs/t1/217765/31/18161/134474/62afeb64Eac40409d/53da0cdaf3c7b41e.jpg" width="100%" height="100%" alt=""></a>
                    </div>
                    <div class="swiper-slide swiper-slide_b">
                        <a href=""><img src="https://img13.360buyimg.com/n1/jfs/t1/122277/20/21621/145010/6204e2b3E042cd321/a7a19e68aabbca18.jpg" width="100%" height="100%" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="content">
                <h4 class="title">
                    季羡林作品集：糊涂一点 潇洒一点+时间从来不语 却回答了所有问题（套装共2册）
                </h4>
                <div class="desc-box">
                    <p class="line">
                        <b>作 者：</b>
                        <span>季羡林</span>
                    </p>
                    <p class="line">
                        <b>简 介：</b>
                        <span>东野圭吾出道35周年新作《白鸟与蝙蝠》火热发售中。这一次，我天空里的太阳，将由我亲手熄灭...</span>
                    </p>
                    <p class="line">
                        <b>简 介：</b>
                        <span>东野圭吾出道35周年新作《白鸟与蝙蝠》火热发售中。这一次，我天空里的太阳，将由我亲手熄灭...</span>
                    </p>
                </div>
                <div class="price-box">
                    <div class="tit">价 格：</div>
                    <div class="price">
                        <span>￥</span><b>38.8</b>
                    </div>
                </div>
                <div class="num-box">
                    <div class="tit">数 量：</div>
                    <div class="count_wrapper">
                        <div class="quantityBtn minusBtn disabled">
                            <span class="quantityBtnTextForPC">-</span>
                        </div>
                        <div class="countValueWrapper">
                            <input class="countValueForPC" height="0" autocomplete="false" value="1">
                        </div>
                        <div class="quantityBtn addBtn">
                            <span class="quantityBtnTextForPC">+</span>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <div class="action-box">
                        <button class="btn btn-buy">马上抢购</button>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 这个是登录注册的弹出框 -->
    <div id="loginModal" class="spxy_wrapper hide">
        <!--遮罩层-->
        <div class="spxy_con">
            <div class="spxy_cell">
                <div class="spxy_cell_box">
                    <!-- 右侧的x  关闭 -->
                    <span class="spxy_close"></span>
                    <div class="login_cont">
                        <div class="tab-main clerafix  ">
                            <!-- 手机验证码注册登录 -->
                            <div class="phone-m fl hide" id="register_avatar">
                                <div class="frame-bd clearfix">
                                    <div class="h3">
                                        <strong>注册登录</strong> <a href="javascript:void(0)" class="is_username">已有账号</a>
                                    </div>
                                    <span class="title">手机号</span>
                                    <div class="phone-num"><input type="text" name="phone" maxlength="11" placeholder="请输入11位的手机号码"></div>
                                    <!-- 这个是右滑 验证的 -->
                                    <div id="slider1" class="slider">
                                        <div class="ui-slider-wrap">
                                            <div class="ui-slider-text ui-slider-no-select">
                                                <span>请按住滑块，拖动到最右边</span>
                                            </div>
                                            <div class="ui-slider-btn init ui-slider-no-select"></div>
                                            <div class="ui-slider-bg" style="height: 34px; background-color: rgb(122, 194, 60);"></div>
                                        </div>
                                    </div>
                                    <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container--><span class="title">验证码</span>
                                    <div class="phone-ver">
                                        <div class="code-l fl"><input class="yz-v1" type="text" name="code" placeholder="请输入验证码"></div>
                                        <div class="code-r fr"><input type="button" value="获取验证码" class="get-code"></div>
                                    </div>
                                    <div class="phone-btn">立即登录</div>
                                </div>
                            </div>
                            <!-- 手机密码登录 -->
                            <div class="pass-m fl hide" id="login_avatar">
                                <div class="frame-bd clearfix">
                                    <div class="h3">
                                        <strong>登录</strong>
                                    </div>
                                    <span class="title">账号</span>
                                    <div class="pass-num">
                                        <input type="text" name="phone" placeholder="请输入您的账户">
                                    </div>
                                    <span class="title">密码</span>
                                    <div class="pass-ver">
                                        <input type="password" name="phone" placeholder="请输入您的密码">
                                    </div>
                                    <div class="pass-btn">立即登录</div>
                                    <div class="b-wrap clearfix">
                                        <div class="go fl"><a href="javascript:;" class="go-back" attr-data="1">账号注册</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--脚部-->
    <div class="footer">
        <div class="footer_con">
            <div class="footer_logo">
                <img src="static/images/logo_footer.png" alt="">
                <span><a href="">读者指南</a></span>
                <span><a href="">查找资料</a></span>
                <span><a href="">快速借书</a></span>
                <span><a href="">快速还书</a></span>
                <span><a href="">关于我们</a></span>
                <span><a href="">版权声明</a></span>
            </div>
            <div class="friend_url">
                <span>友情链接：</span>
                <span><a href="https://www.baidu.com/">百度一下</a></span>
                <span><a href="https://shop102025153.taobao.com/?spm=a230r.7195193.1997079397.2.1b5e710dnRUQIm">LuckyTown</a></span>
                <span><a href="https://shop102025153.taobao.com/?spm=a230r.7195193.1997079397.2.1b5e710dnRUQIm">鹿K小镇</a></span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="static/js/detail/detail.js"></script>
</body>
</html>